/**
* @Author: 李晨光
* @Date: 2019/12/9
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/9
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="MeasureDetail">
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="open">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="closeDetail">
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{title}}
      </mu-appbar>
      <div style="height:calc(100vh - .45rem);overflow: auto">
        <slot name='detail-item'>
          <div class="lan-detail-list">
            <span class="lan-detail-h">责任单位</span>
            <span class="lan-detail-r">{{detail.projectName}}</span>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
                <span class="lan-detail-h">平面图标记</span>
                <span class="lan-detail-r">
                  隐藏标号<mu-switch class="demo-picker-form" v-model="markSwitch"></mu-switch>
                </span>
              </div>
              <div class="img-box">
                <MapShow :width="'100%'" :url="detail.images" :points="handSome(detail.pointList)"
                         :showPoint="!markSwitch" :readonly="true"></MapShow>
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
                <span class="lan-detail-h">实测点位1</span>
              </div>
              <div class="img-box">
                <table class="custom-table" style="border: 1px solid #E0E0E0">
                  <tr>
                    <th style="width: 1.07rem;">实测分项</th>
                    <th style="width: .8rem;">实测内容</th>
                    <th style="width: .8rem;">数值</th>
                    <th style="width: .8rem;">结果</th>
                  </tr>
                  <tr>
                    <td style="width: 1.07rem;">实测分项</td>
                    <td style="width: .8rem;">实测内容</td>
                    <td style="width: .8rem;">数值</td>
                    <td style="width: .8rem;">结果</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <span class="lan-detail-h">参与人</span>
            <span class="lan-detail-r">{{detail.createdUserName}}</span>
          </div>
          <div class="lan-detail-list">
            <span class="lan-detail-h">实测人</span>
            <span class="lan-detail-r">{{detail.createdUserName}}</span>
          </div>
          <div class="lan-detail-list">
            <span class="lan-detail-h">实测时间</span>
            <span class="lan-detail-r">{{detail.createdTime}}</span>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <p class="lan-detail-h">现场照片</p>
              <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between" >
                <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
                <img class="thumbnail" :preview="index" :src="list" v-for="(list,index) in handurl(detail.images)"  :key="index"/>
              </div>
            </div>
          </div>
          <div class="lan-detail-list">
            <div class="lan-detail-list-box">
              <p class="lan-detail-h">文件</p>
              <p class="lan-detail-r" v-for="(list,index) in handurl(detail.files)" :key="index"
                 @click="loadFile({url:list,name:list.substr(list.lastIndexOf('/')+1)})">
                <span class="lan-fileName">{{list.substr(list.lastIndexOf('/')+1)}}</span>
              </p>
            </div>
          </div>
        </slot>
      </div>
    </mu-dialog>
    <ImgPreview :imgUrls="imgs" :open="imgPreview" @close="closeDialog"></ImgPreview>
    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="closeFileDialog"></FilePreview>
  </div>
</template>

<script>
  import ImgPreview from "@/preview/ImgPreview.vue"
  import FilePreview from "@/preview/FilePreview.vue"
  export default {
    name: 'MeasureDetail',
    components: {
      ImgPreview,
      FilePreview
    },
    props: {
      title: {
        type: String,
        default: '详情'
      },
      open: {
        type: Boolean,
        default: false
      },
      detail: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        markSwitch: false,
        mapMarkUrl: '',
        imgPreview: false,
        imgs: [],
        filePreview: false,
        fileUrl: '',
        list: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: 1
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: 1
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: 7
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: 8
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: 16
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: 0
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: 2
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: 45
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: 22
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: 6
          }
        ]
      }
    },
    computed: {},
    created() {
    },
    mounted() {
    },
    watch: {},
    methods: {
      handSome(list=[]){
        if(!list){
          return []
        }else{
          for(let i=0;i<list.length;i++){
            list[i] = {lng:list[i]['left'],lat:list[i]['top'],...list[i]}
          }
        }
      },
      // 打开
      openDetail() {
        this.$emit('open', true)
      },
      // 关闭
      closeDetail() {
        this.$emit('close', true)
      },

      handurl(str) {
        if (!str) {
          return []
        } else {
          return str.split(',')
        }
      },
      loadFile(list) {
        let a = document.createElement('a');
        a.setAttribute("href", list.url);
        a.setAttribute("download", list.name);
        a.click();
      },
      preview(item, index) {
        this.imgs = [...this.handurl(this.detail.images)]
        this.imgPreview = true
      },
      filePreviewAction() {
        this.fileUrl = this.detail.images
        this.filePreview = true
      },
      // 关闭
      openFileDialog() {
        this.filePreview = true
      },
      // 关闭
      closeFileDialog() {
        this.filePreview = false
      },
      closeDialog() {
        this.imgPreview = false
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
</style>
